<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.energyblue.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.bootstrap.css" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcheckbox.js"></script>

<fieldset>
    <legend>Planificación de Evaluaciones</legend>             
    <div class="span12">

        <div class="control-group span7 offset5">
            <label class="control-label">Número de Semana</label>
            <div class="controls">
                <select data-placeholder="Seleccionar..." id="semana" class="chosen-select span4">
                    <option value=""></option>
                    <option value="1"> 1 </option>
                    <option value="2"> 2 </option>
                    <option value="3"> 3 </option>
                    <option value="4"> 4 </option>
                    <option value="5"> 5 </option>
                    <option value="6"> 6 </option>
                    <option value="7"> 7 </option>
                    <option value="8"> 8 </option>
                    <option value="9"> 9 </option>
                    <option value="10"> 10 </option>
                    <option value="11"> 11 </option>
                    <option value="12"> 12 </option>
                    <option value="13"> 13 </option>
                    <option value="14"> 14 </option>
                    <option value="15"> 15 </option>
                    <option value="16"> 16 </option>
                    <option value="17"> 17 </option>
                    <option value="18"> 18 </option>
                </select>
                &nbsp&nbsp&nbsp&nbsp&nbsp
                <a class="btn btn-info" onclick="asignar_evaluacion();">Asignar Evaluación</a>
            </div>             
        </div>
    </div>

    <div class="span12">
        <div class="span5">
            <div id="arbol"></div>
        </div>
        <div class="span6">

            <div class="accordion" id="accordion2">

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse1">
                            <div align="center">Semana 1</div>
                        </a>
                    </div>
                    <div id="collapse1" class="accordion-body collapse">
                        <div id="semana1" class="accordion-inner">
                            <input id="cantEvaluaciones1" value=0 style="display:none">
                            <input id="grupo1" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse2">
                            <div align="center">Semana 2</div>
                        </a>
                    </div>
                    <div id="collapse2" class="accordion-body collapse">
                        <div id="semana2" class="accordion-inner">
                            <input id="cantEvaluaciones2" value=0 style="display:none">
                            <input id="grupo2" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">
                            <div align="center">Semana 3</div>
                        </a>
                    </div>
                    <div id="collapse3" class="accordion-body collapse">
                        <div id="semana3" class="accordion-inner">
                            <input id="cantEvaluaciones3" value=0 style="display:none">
                            <input id="grupo3" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse4">
                            <div align="center">Semana 4</div>
                        </a>
                    </div>
                    <div id="collapse4" class="accordion-body collapse">
                        <div id="semana4" class="accordion-inner">
                            <input id="cantEvaluaciones4" value=0 style="display:none">
                            <input id="grupo4" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse5">
                            <div align="center">Semana 5</div>
                        </a>
                    </div>
                    <div id="collapse5" class="accordion-body collapse">
                        <div id="semana5" class="accordion-inner">
                            <input id="cantEvaluaciones5" value=0 style="display:none">
                            <input id="grupo5" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse6">
                            <div align="center">Semana 6</div>
                        </a>
                    </div>
                    <div id="collapse6" class="accordion-body collapse">
                        <div id="semana6" class="accordion-inner">
                            <input id="cantEvaluaciones6" value=0 style="display:none">
                            <input id="grupo6" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse7">
                            <div align="center">Semana 7</div>
                        </a>
                    </div>
                    <div id="collapse7" class="accordion-body collapse">
                        <div id="semana7" class="accordion-inner">
                            <input id="cantEvaluaciones7" value=0 style="display:none">
                            <input id="grupo7" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse8">
                            <div align="center">Semana 8</div>
                        </a>
                    </div>
                    <div id="collapse8" class="accordion-body collapse">
                        <div id="semana8" class="accordion-inner">
                            <input id="cantEvaluaciones8" value=0 style="display:none">
                            <input id="grupo8" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse9">
                            <div align="center">Semana 9</div>
                        </a>
                    </div>
                    <div id="collapse9" class="accordion-body collapse">
                        <div id="semana9" class="accordion-inner">
                            <input id="cantEvaluaciones9" value=0 style="display:none">
                            <input id="grupo9" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse10">
                            <div align="center">Semana 10</div>
                        </a>
                    </div>
                    <div id="collapse10" class="accordion-body collapse">
                        <div id="semana10" class="accordion-inner">
                            <input id="cantEvaluaciones10" value=0 style="display:none">
                            <input id="grupo10" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse11">
                            <div align="center">Semana 11</div>
                        </a>
                    </div>
                    <div id="collapse11" class="accordion-body collapse">
                        <div id="semana11" class="accordion-inner">
                            <input id="cantEvaluaciones11" value=0 style="display:none">
                            <input id="grupo11" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse12">
                            <div align="center">Semana 12</div>
                        </a>
                    </div>
                    <div id="collapse12" class="accordion-body collapse">
                        <div id="semana12" class="accordion-inner">
                            <input id="cantEvaluaciones12" value=0 style="display:none">
                            <input id="grupo12" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse13">
                            <div align="center">Semana 13</div>
                        </a>
                    </div>
                    <div id="collapse13" class="accordion-body collapse">
                        <div id="semana13" class="accordion-inner">
                            <input id="cantEvaluaciones13" value=0 style="display:none">
                            <input id="grupo13" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse14">
                            <div align="center">Semana 14</div>
                        </a>
                    </div>
                    <div id="collapse14" class="accordion-body collapse">
                        <div id="semana14" class="accordion-inner">
                            <input id="cantEvaluaciones14" value=0 style="display:none">
                            <input id="grupo14" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse15">
                            <div align="center">Semana 15</div>
                        </a>
                    </div>
                    <div id="collapse15" class="accordion-body collapse">
                        <div id="semana15" class="accordion-inner">
                            <input id="cantEvaluaciones15" value=0 style="display:none">
                            <input id="grupo15" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse16">
                            <div align="center">Semana 16</div>
                        </a>
                    </div>
                    <div id="collapse16" class="accordion-body collapse">
                        <div id="semana16" class="accordion-inner">
                            <input id="cantEvaluaciones16" value=0 style="display:none">
                            <input id="grupo16" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse17">
                            <div align="center">Semana 17</div>
                        </a>
                    </div>
                    <div id="collapse17" class="accordion-body collapse">
                        <div id="semana17" class="accordion-inner">
                            <input id="cantEvaluaciones17" value=0 style="display:none">
                            <input id="grupo17" value=0 style="display:none">
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse18">
                            <div align="center">Semana 18</div>
                        </a>
                    </div>
                    <div id="collapse18" class="accordion-body collapse">
                        <div id="semana18" class="accordion-inner">
                            <input id="cantEvaluaciones18" value=0 style="display:none">
                            <input id="grupo18" value=0 style="display:none">
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</fieldset>
</form>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"></h3>
    </div>
    <div id="mensajeControl" style="display: none">
        <button type="button" class="close" data-dismiss="alert">×</button>
    </div>
    <div class="modal-body" style="height:600px;">
        <div class="row-fluid">
            <div class="span12">
                <div class="control-group"></div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="control-group">
                <label class="control-label"><strong>Criterios Asignados</strong></label>
                <div class="controls" id="criterios_asignados">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label"><strong>Tipo de Equipo a Evaluar</strong></label>
                <div class="controls" id="tipo_equipos">
                </div>
                <input type='text' id='idSemana' style="display:none">
                <input type='text' id='cl' style="display:none">
                <input type='text' id='numEvaluacion' style="display:none">
            </div>
            <div class="control-group">
                <label class="control-label"><strong>Equipos:</strong></label>
                <div class="controls" id="equipos">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <a class="btn btn-primary" onclick="registrar_evaluacion();">Grabar</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function() {

        $(".chosen-select").chosen({no_results_text: "No hay coincidencias con"});
        $(".chosen-select-deselect").chosen({allow_single_deselect: true});

        ver_rubrica_evaluacion();
        
        cargar_evaluaciones();
    });

    $(".close").click(function(){
        $(".eqs").remove();
     });

    function asignar_evaluacion() {
        //obtener criterios
        
        var datos={
          criterios:[]
        };
        
        var obj={
            id:"",
            nombre:""
        };
        
        var l;
        var j = 0;
        var items = $('#arbol').jqxTree('getCheckedItems');

        for (l = 0; l < items.length; l++) {
            if ($(items[l]['element']).hasClass("hijo")) {
                var obj={
                    id: $(items[l]['element']).attr("id"),
                    nombre:$("#"+$(items[l]['element']).attr("id")+"_").text()
                };
                datos.criterios[j] = obj;
                j++;
            }
        }
        
        var criterios = JSON.stringify(datos);
    
        var semana = $('#semana').val();
        for (var i = 1; i <= 16; i++) {
            $("#collapse" + i).removeClass("in");
        }
        $("#collapse" + semana).addClass("in");

        var cantEv = parseInt($("#cantEvaluaciones" + semana).val()) + 1;
        $("#cantEvaluaciones" + semana).val(cantEv);

        var cad = "";

        if ((cantEv % 3) - 1 === 0) {
            var grupo = parseInt($("#grupo" + semana).val()) + 1;
            $("#grupo" + semana).val(grupo);
            var cl = "ev_" + semana + "_" + cantEv;
            cad += '<div id="grupo' + semana + "_" + grupo + '" class="control-group" align="center">';
            cad += "<a onclick='datos_evaluacion(" + cantEv + ", \"" + cl + "\", \""+semana+"\","+criterios+");' class='btn btn-success "+cl+"' href='#myModal' role='button' data-toggle='modal'>Evaluación " + cantEv + "</a>&nbsp;";
            cad += '</div>';
            $("#semana" + semana).append(cad);
        }
        else {
            var grupo = parseInt($("#grupo" + semana).val());
            var cl = "ev_" + semana + "_" + cantEv;
            cad += "<a onclick='datos_evaluacion(" + cantEv + ", \"" + cl + "\", \""+semana+"\","+criterios+");' class='btn btn-success "+cl+"' href='#myModal' role='button' data-toggle='modal'>Evaluación " + cantEv + "</a>&nbsp;";
            $("#grupo" + semana + "_" + grupo).append(cad);
        }
    }

    function datos_evaluacion(numEv, cl, semana, criterios) {
        
        var htmlCriterios="";
        
        $.each(criterios['criterios'], function( index, value ) {
            htmlCriterios += "<span class='crit' id='"+value['id']+"'>"+value['nombre']+"</span><br>";
        });
        
        $("#idSemana").val(semana);
        $("#cl").val(cl);
        $("#numEvaluacion").val(numEv);
        $("#myModalLabel").text("Evaluación " + numEv);
        var idEvaluacion = $("."+cl).attr("id");
        
        if (typeof idEvaluacion !== 'undefined') { //SÍ hay id
            var datos = {
                idEvaluacion: idEvaluacion
            };
            
            $.ajax({
                data: datos,
                type: "POST",
                dataType: 'json',
                url: "../cursos/obtener_datos_bd_planificar_evaluacion",
                success: function(resultado) {
                    $("#criterios_asignados").html(htmlCriterios);
                    $("#tipo_equipos").html(resultado['0']);
                    $(".chosen-select").chosen({no_results_text: "No hay coincidencias con"});
                    $(".chosen-select-deselect").chosen({allow_single_deselect: true});
                    
                    var idTipoEquipo = resultado['1'];
                    
                    var datos = {
                        idEvaluacion: idEvaluacion,
                        idTipoEquipo: idTipoEquipo
                    };

                    $.ajax({
                        url: "../cursos/buscar_equipos_evaluacion",
                        type: "POST",
                        data: datos,
                        success: function(resultado) {
                            $("#equipos").html(resultado);
                        }
                    });
                    
                    $("#tipo_equipo").change(function() {

                        var idTipoEquipo = $("#tipo_equipo").val();
                        var datos = {
                            idTipoEquipo: idTipoEquipo
                        };

                        $.ajax({
                            url: "../cursos/buscar_equipos",
                            type: "POST",
                            data: datos,
                            success: function(resultado) {
                                $("#equipos").html(resultado);
                            }
                        });

                    });

                }
            });    
        }
        else { //NO hay id
            $.ajax({
                url: "../cursos/datos_planificar_evaluacion",
                success: function(resultado) {
                
                    $("#criterios_asignados").html(htmlCriterios);
                    $("#tipo_equipos").html(resultado);
                    $(".chosen-select").chosen({no_results_text: "No hay coincidencias con"});
                    $(".chosen-select-deselect").chosen({allow_single_deselect: true});

                    $("#tipo_equipo").change(function() {

                        var idTipoEquipo = $("#tipo_equipo").val();
                        var datos = {
                            idTipoEquipo: idTipoEquipo
                        };

                        $.ajax({
                            url: "../cursos/buscar_equipos",
                            type: "POST",
                            data: datos,
                            success: function(resultado) {
                                $("#equipos").html(resultado);
                            }
                        });
                    });

                }
            });
        }

    }

    function ver_rubrica_evaluacion() {
        var theme = 'bootstrap';
        $.ajax({
            url: "../rubricas/arbol_rubrica_evaluacion",
            success: function(resultado) {
                console.log(resultado);
                $("#arbol").html(resultado);
                $("#arbol").jqxTree({hasThreeStates: true, checkboxes: true, height: 715, width: 400, theme: theme});
                $("#arbol").jqxTree('expandAll');
                $("#arbol").jqxTree('selectItem', $("#arbol").find('li:first')[0]);
            }
        });
    }
    
    function registrar_evaluacion() {
        var numEvaluacion = $('#numEvaluacion').val();
        var tipoEquipo = $('#tipo_equipo').val();
        var idSemana = parseInt($('#idSemana').val());
        
        var listaEquipos = [];
        
        var j=0;
        
        $('.eq:checked').each(function(){
            listaEquipos[j] = $(this).val();
            j++;
        });
        
        var equipos = JSON.stringify(listaEquipos);
        var idEquipos = $.parseJSON(equipos);
        
        var lista_idCriterios = [];
        
        var k=0;
        
        $('.crit').each(function(){
            lista_idCriterios[k] = this.id;
            k++;
        });
        
        var criterios = JSON.stringify(lista_idCriterios);
        var idCriterios = $.parseJSON(criterios);
        
        var datos = {
            numEvaluacion: numEvaluacion,
            idTipoEquipo: tipoEquipo,
            idEquipos: idEquipos,
            idSemana: idSemana,
            idCriterios: idCriterios
        };
        
        $.ajax({
            url: "../cursos/registrar_evaluacion",
            type: "POST",
            dataType: 'json',
            data: datos,
            success: function(data) {
                    var mensaje = data["mensaje"];
                    var idEvaluacion = data["idEvaluacion"];
                    if (mensaje === "ok") {
                        $('#mensajeControl').removeClass("alert alert-error").addClass("alert alert-success");
                        mostrarMensajeTemporal("#mensajeControl", "Se registró la Evaluación exitosamente", 8000);
                        $("."+$("#cl").val()).attr('id',idEvaluacion) ;
                    }
                    else if (mensaje === "error") {
                        $('#mensajeControl').addClass("alert alert-error");
                        mostrarMensajeTemporal("#mensajeControl", "Error de base de datos, intente nuevamente", 8000);
                    }
                }
        });
        
        
    }

    $('#arbol').on('select', function(event) {
        var args = event.args;
        var item = $('#arbol').jqxTree('getItem', args.element);
        //evento click

        var datos = {
            id: item.id,
            idPadre: item.parentId
        };

        $.ajax({
            url: "../rubricas/buscar_atributos_rubrica_docente",
            type: "POST",
            dataType: "json",
            data: datos,
            success: function(descripcion) {
                    $(".popover").remove();
                    $('#' + item.id + "_").popover({
                        title: descripcion[1],
                        placement: 'bottom',
                        html: true,
                        delay: { show: 500, hide: 100 },
                        content: '<p>Nombre Corto: '+ descripcion[2] +'<br>'+
                            'Descripción: ' + descripcion[0] +'</p>'
                    });
                }
        });

    }); 
    
    function cargar_evaluaciones() {
        $.ajax({
            url: "../cursos/cargar_evaluaciones",
            dataType: "json",
            success: function(evaluaciones) {
                
                $.each(evaluaciones[1], function(key1, obj1) {
                    var semana = key1.substring(4);
                    
                    $.each(obj1, function(key2, obj2) {
                        
                        var myArray = key2.split('_');

                        var datos1 = {
                            idEvaluacion : myArray[2]
                        };
                        
                        $.ajax({
                            url: "../cursos/criterios_evaluacion",
                            type: "POST",
                            async: false,
                            dataType: "json",
                            data: datos1,
                            success: function(crit) {
                                var criterios = "{\"criterios\":" + JSON.stringify(crit) + "}";
                                var evaluacion = myArray[1];
                                var idEvaluacion = myArray[2];
                        
                                $("#cantEvaluaciones" + semana).val(evaluacion);

                                var cad = "";

                                if ((evaluacion % 3) - 1 === 0) {
                                    var grupo = parseInt($("#grupo" + semana).val()) + 1;
                                    $("#grupo" + semana).val(grupo);
                                    var cl = "ev_" + semana + "_" + evaluacion;
                                    cad += '<div id="grupo' + semana + "_" + grupo + '" class="control-group" align="center">';
                                    cad += "<a id="+ idEvaluacion +" onclick='datos_evaluacion(" + evaluacion + ", \"" + cl + "\", \""+semana+"\","+criterios+");' class='btn btn-success "+cl+"' href='#myModal' role='button' data-toggle='modal'>Evaluación " + evaluacion + "</a>&nbsp;";
                                    cad += '</div>';
                                    $("#semana" + semana).append(cad);
                                }
                                else {
                                    var grupo = parseInt($("#grupo" + semana).val());
                                    var cl = "ev_" + semana + "_" + evaluacion;
                                    cad += "<a id="+ idEvaluacion +" onclick='datos_evaluacion(" + evaluacion + ", \"" + cl + "\", \""+semana+"\","+criterios+");' class='btn btn-success "+cl+"' href='#myModal' role='button' data-toggle='modal'>Evaluación " + evaluacion + "</a>&nbsp;";
                                    $("#grupo" + semana + "_" + grupo).append(cad);
                                }
                            }
                        });
                        
                    });
                });
            }
        });
    }

</script>